<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>跳转问题诊断</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 20px auto;
            padding: 20px;
            background: #f5f5f5;
        }
        .container {
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1 {
            color: #333;
            text-align: center;
        }
        .test-section {
            margin: 20px 0;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        button {
            background: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            margin: 5px;
        }
        button:hover {
            background: #0056b3;
        }
        .admin-btn {
            background: #ff6b35;
        }
        .admin-btn:hover {
            background: #e55a2b;
        }
        .log {
            background: #f8f9fa;
            border: 1px solid #ddd;
            border-radius: 5px;
            padding: 15px;
            margin: 10px 0;
            font-family: monospace;
            font-size: 12px;
            max-height: 300px;
            overflow-y: auto;
        }
        .status {
            background: #e7f3ff;
            border: 1px solid #b3d9ff;
            border-radius: 5px;
            padding: 15px;
            margin: 10px 0;
        }
        .error {
            background: #ffe7e7;
            border: 1px solid #ffb3b3;
            border-radius: 5px;
            padding: 15px;
            margin: 10px 0;
        }
        .success {
            background: #e7ffe7;
            border: 1px solid #b3ffb3;
            border-radius: 5px;
            padding: 15px;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🔧 跳转问题诊断</h1>
        
        <div class="test-section">
            <h3>📊 系统状态检查</h3>
            <div id="system-status" class="status">
                <p><strong>前端服务:</strong> <span id="frontend-status">检查中...</span></p>
                <p><strong>后端服务:</strong> <span id="backend-status">检查中...</span></p>
                <p><strong>后端管理页面:</strong> <span id="admin-page-status">检查中...</span></p>
            </div>
            <button onclick="checkSystemStatus()">重新检查系统状态</button>
        </div>

        <div class="test-section">
            <h3>🔗 跳转测试</h3>
            <button onclick="testJumpToFrontend()">测试跳转到前端首页</button>
            <button onclick="testJumpToBackend()" class="admin-btn">测试跳转到后端管理后台</button>
            <button onclick="testJumpWithDelay()" class="admin-btn">延迟跳转测试</button>
        </div>

        <div class="test-section">
            <h3>👨‍💼 管理员登录测试</h3>
            <button onclick="testAdminLogin()" class="admin-btn">测试管理员登录</button>
            <button onclick="testAdminLoginAndJump()" class="admin-btn">测试管理员登录并跳转</button>
        </div>

        <div class="test-section">
            <h3>📝 详细日志</h3>
            <div id="log" class="log">
                <strong>日志:</strong><br>
            </div>
            <button onclick="clearLog()">清除日志</button>
        </div>

        <div class="test-section">
            <h3>🧹 清理操作</h3>
            <button onclick="clearAll()" style="background: #dc3545;">清除所有认证信息</button>
            <button onclick="refreshPage()">刷新页面</button>
        </div>
    </div>

    <script>
        function log(message, type = 'info') {
            const logDiv = document.getElementById('log');
            const time = new Date().toLocaleTimeString();
            const typeIcon = type === 'error' ? '❌' : type === 'success' ? '✅' : type === 'warning' ? '⚠️' : 'ℹ️';
            logDiv.innerHTML += `[${time}] ${typeIcon} ${message}<br>`;
            console.log(`[${type}] ${message}`);
        }

        function clearLog() {
            document.getElementById('log').innerHTML = '<strong>日志:</strong><br>';
        }

        async function checkSystemStatus() {
            log('开始检查系统状态...');
            
            // 检查前端服务
            try {
                const frontendResponse = await fetch('http://127.0.0.1:5173/');
                if (frontendResponse.ok) {
                    document.getElementById('frontend-status').textContent = '✅ 运行中';
                    log('前端服务正常', 'success');
                } else {
                    document.getElementById('frontend-status').textContent = '❌ 异常';
                    log('前端服务异常', 'error');
                }
            } catch (error) {
                document.getElementById('frontend-status').textContent = '❌ 无法连接';
                log(`前端服务无法连接: ${error.message}`, 'error');
            }

            // 检查后端服务
            try {
                const backendResponse = await fetch('http://127.0.0.1:8000/api/test');
                if (backendResponse.ok) {
                    document.getElementById('backend-status').textContent = '✅ 运行中';
                    log('后端服务正常', 'success');
                } else {
                    document.getElementById('backend-status').textContent = '❌ 异常';
                    log('后端服务异常', 'error');
                }
            } catch (error) {
                document.getElementById('backend-status').textContent = '❌ 无法连接';
                log(`后端服务无法连接: ${error.message}`, 'error');
            }

            // 检查后端管理页面
            try {
                const adminResponse = await fetch('http://127.0.0.1:8000/admin/dashboard');
                if (adminResponse.ok) {
                    document.getElementById('admin-page-status').textContent = '✅ 可访问';
                    log('后端管理页面可访问', 'success');
                } else {
                    document.getElementById('admin-page-status').textContent = '❌ 无法访问';
                    log('后端管理页面无法访问', 'error');
                }
            } catch (error) {
                document.getElementById('admin-page-status').textContent = '❌ 无法连接';
                log(`后端管理页面无法连接: ${error.message}`, 'error');
            }
        }

        function testJumpToFrontend() {
            log('测试跳转到前端首页...');
            try {
                window.location.href = 'http://127.0.0.1:5173/home';
                log('跳转命令已执行', 'success');
            } catch (error) {
                log(`跳转失败: ${error.message}`, 'error');
            }
        }

        function testJumpToBackend() {
            log('测试跳转到后端管理后台...');
            try {
                window.location.href = 'http://127.0.0.1:8000/admin/dashboard';
                log('跳转命令已执行', 'success');
            } catch (error) {
                log(`跳转失败: ${error.message}`, 'error');
            }
        }

        function testJumpWithDelay() {
            log('测试延迟跳转...');
            setTimeout(() => {
                log('延迟跳转执行中...');
                try {
                    window.location.href = 'http://127.0.0.1:8000/admin/dashboard';
                    log('延迟跳转命令已执行', 'success');
                } catch (error) {
                    log(`延迟跳转失败: ${error.message}`, 'error');
                }
            }, 1000);
        }

        async function testAdminLogin() {
            log('开始测试管理员登录...');
            
            try {
                log('发送管理员登录请求...');
                const response = await fetch('http://127.0.0.1:8000/api/admin/login', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        username: 'admin@example.com',
                        password: 'admin123'
                    })
                });

                log(`收到响应，状态码: ${response.status}`);
                const data = await response.json();
                log(`响应数据: ${JSON.stringify(data)}`);
                
                if (data.success) {
                    log('管理员登录成功！', 'success');
                    localStorage.setItem('adminToken', data.data.token);
                    localStorage.setItem('adminUser', JSON.stringify(data.data.user));
                    localStorage.setItem('userType', 'admin');
                    log('认证信息已保存', 'success');
                } else {
                    log(`管理员登录失败: ${data.message}`, 'error');
                }
            } catch (error) {
                log(`管理员登录错误: ${error.message}`, 'error');
            }
        }

        async function testAdminLoginAndJump() {
            log('开始测试管理员登录并跳转...');
            
            try {
                log('发送管理员登录请求...');
                const response = await fetch('http://127.0.0.1:8000/api/admin/login', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        username: 'admin@example.com',
                        password: 'admin123'
                    })
                });

                log(`收到响应，状态码: ${response.status}`);
                const data = await response.json();
                log(`响应数据: ${JSON.stringify(data)}`);
                
                if (data.success) {
                    log('管理员登录成功！', 'success');
                    localStorage.setItem('adminToken', data.data.token);
                    localStorage.setItem('adminUser', JSON.stringify(data.data.user));
                    localStorage.setItem('userType', 'admin');
                    log('认证信息已保存', 'success');
                    
                    log('2秒后跳转到后端管理后台...');
                    setTimeout(() => {
                        log('正在跳转到后端管理后台...');
                        try {
                            window.location.href = 'http://127.0.0.1:8000/admin/dashboard';
                            log('跳转命令已执行', 'success');
                        } catch (error) {
                            log(`跳转失败: ${error.message}`, 'error');
                        }
                    }, 2000);
                } else {
                    log(`管理员登录失败: ${data.message}`, 'error');
                }
            } catch (error) {
                log(`管理员登录错误: ${error.message}`, 'error');
            }
        }

        function clearAll() {
            log('清除所有认证信息...');
            localStorage.removeItem('token');
            localStorage.removeItem('adminToken');
            localStorage.removeItem('user');
            localStorage.removeItem('adminUser');
            localStorage.removeItem('userType');
            log('已清除所有认证信息', 'success');
        }

        function refreshPage() {
            log('刷新页面...');
            window.location.reload();
        }

        // 页面加载时检查系统状态
        window.onload = function() {
            log('页面加载完成');
            checkSystemStatus();
        };

        // 监听页面错误
        window.addEventListener('error', function(event) {
            log(`页面错误: ${event.error.message}`, 'error');
        });

        // 监听未处理的Promise错误
        window.addEventListener('unhandledrejection', function(event) {
            log(`未处理的Promise错误: ${event.reason}`, 'error');
        });
    </script>
</body>
</html>
